<template>
  <gui-page
    ref="pageRef"
    class="gui-bg-white"
    :custom-footer="true"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white gui-border-b" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text" style="font-size: 32rpx">开通VIP</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column gui-padding">
        <!-- 主体区域 -->
        <view>
          <view class="text-center gui-color-orange">
            <text class="gui-h5">开通VIP查看完整数据</text>
          </view>
          <view class="gui-padding gui-bg-green7 gui-margin-top-small gui-border-radius">
            <view class="gui-flex flex-center gui-space-between gui-relative">
              <view
                v-for="(item, index) in 3"
                :key="item"
                class="gui-bg-yellow3 text-center gui-border-radius"
                style="padding: 20rpx"
                @tap.stop="selectIndex = index"
              >
                <text class="gui-color-orange gui-h4">98</text>
                <text class="gui-text-small">元</text>
                <text
                  v-if="index === selectIndex"
                  class="gui-icons gui-primary-color"
                  style="position: absolute; margin-top: -20rpx; margin-left: 12rpx"
                >
                  &#xe7f8;
                </text>
                <view class="gui-text-small gui-margin-top-small">2024年高考</view>
              </view>
            </view>
            <view class="gui-text-small gui-margin-top">有效期至：2024-08-31</view>
          </view>
          <view class="gui-text-center gui-margin-top">
            <text class="gui-color-red gui-h5">VIP会员特权</text>
          </view>
          <!-- 会员功能列表 -->
          <view class="gui-data-tr gui-flex gui-row gui-nowrap gui-data-tb gui-bg-white gui-dark-bg-level-3">
            <text class="gui-data-tb-l gui-data-tb-text gui-primary-text gui-block gui-bold" />
            <view class="gui-data-tb-r">
              <gui-touch @th-move="thMove" @th-start="thStart">
                <!-- 右侧总宽度 = 单元格宽度 * 数量 -->
                <!-- 单元格宽度 来自 .grace-data-table-td 默认 200rpx -->
                <view
                  class="gui-flex gui-row gui-nowrap"
                  :style="{
                    marginLeft: scrollLeft1 * -1 + 'px',
                    width: 200 * tableThs.length + 'rpx',
                  }"
                >
                  <text v-for="(item, index) in tableThs" :key="index" class="gui-data-tb-text gui-primary-text gui-bold">{{ item }}</text>
                </view>
              </gui-touch>
            </view>
          </view>
          <view class="gui-flex gui-row gui-nowrap gui-data-tb">
            <!-- 左侧列表 -->
            <view class="gui-data-tb-l">
              <text v-for="(item, index) in tableTrs" :key="index" class="gui-data-tb-text gui-primary-text">
                {{ item.label }}
              </text>
            </view>
            <scroll-view class="gui-scroll-x gui-data-tb-r" :scroll-left="scrollLeft2" scroll-y @scroll="scroll">
              <!-- 右侧总宽度 = 单元格宽度 * 数量 -->
              <!-- 单元格宽度 来自 .grace-data-table-td 默认 200rpx -->
              <view :style="{ width: 200 * tableThs.length + 'rpx' }">
                <!-- 此处相当于表格的 tr 可进行数据循环  -->
                <view v-for="(item, index) in tableTrs" :key="index" class="gui-flex gui-row gui-nowrap">
                  <text v-for="(td, tdidx) in item.data" :key="tdidx" class="gui-data-tb-text gui-primary-text gui-color-orange gui-bold">
                    {{ td }}
                  </text>
                </view>
              </view>
            </scroll-view>
          </view>
          <view style="height: 80rpx" />
        </view>
      </view>
    </template>
    <template #gFooter>
      <view class="gui-flex gui-space-between gui-border-t gui-padding gui-align-items-center gui-bg-white">
        <view class="gui-flex1">
          <button class="gui-button-mini gui-bg-orange gui-noborder gui-border-radius-full" type="default" @tap.stop="payVip">
            <text class="gui-icons gui-color-white gui-button-text-mini">
              <text>限时</text>
              <text class="gui-h5">98</text>
              <text>元</text>
            </text>
            <text class="gui-line-through" style="margin-left: 10rpx">原价360</text>
          </button>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const pageLoading = ref<boolean>(false)
const code = ref<string>('')
const selectIndex = ref<number>(0)
const scrollLeft1 = ref<number>(0)
const scrollLeft2 = ref<number>(0)
const thStartX = ref<number>(0)
const listWidth = ref<number>(200 * 4 - 550)
const tableThs = ref<Array<any>>(['普通用户', 'VIP用户'])
const tableTrs = ref<Array<any>>([
  { label: '院校库', data: ['√', '√'] },
  { label: '专业库', data: ['√', '√'] },
  { label: '院校录取率评估', data: ['', '√'] },
  { label: '专业录取率评估', data: ['', '√'] },
  { label: '一分一段', data: ['√', '√'] },
  { label: '批次线', data: ['√', '√'] },
  { label: '志愿表解读/建议', data: ['', '√'] },
  { label: '志愿表导出', data: ['', '√'] },
  { label: '职业现状', data: ['', '√'] },
  { label: '招生计划', data: ['', '√'] },
  { label: '历年录取分数线', data: ['', '√'] },
  { label: '位次分析', data: ['', '√'] },
])

const payVip = () => {
  console.log('充值vip')
}
const scroll = (e: any) => {
  scrollLeft1.value = e.detail.scrollLeft
}
const thStart = () => {
  thStartX.value = scrollLeft1.value
}
const thMove = (e: any) => {
  let x = e[0][0]
  x *= -1
  x += thStartX.value
  if (x <= 0) return
  if (x > listWidth.value) return
  scrollLeft2.value = x
}
onLoad((option) => {
  // console.log(JSON.parse(option.data))
  // if (option?.code) {
  //   code.value = option.code
  //   uni.setStorageSync('code', option.code)
  // } else {
  //   code.value = uni.getStorageSync('code')
  // }
  code.value = uni.getStorageSync('code')
  listWidth.value = uni.upx2px(listWidth.value)
})
</script>
<style scoped>
.gui-td {
  width: 100rpx;
  flex: 1;
  overflow: hidden;
  padding: 20rpx 10rpx;
}
.gui-primary-text {
  line-height: 60rpx !important;
  font-size: 24rpx;
}
.gui-data-tb {
  //width: 750rpx;
}
.gui-data-tb-l {
  width: 200rpx;
  overflow: hidden;
}
.gui-data-tb-text {
  width: 200rpx;
  font-size: 26rpx;
  line-height: 50rpx;
  height: 90rpx;
  overflow: hidden;
  padding: 20rpx 10rpx;
  display: block;
  box-sizing: border-box;
  text-align: center;
}
.gui-data-tb-r {
  width: 550rpx !important;
  overflow: hidden;
}
</style>
